<template>
    <div class="comment-popup">
        <van-popup v-model="show" position="bottom" @close="onClose">
            <div class="body">
                <div class="header row">
                    <div class="title">{{ comments.length }}条评论</div>
                    <div class="icon btn-close" @click="onClose">
                        <img :src="require('@/assets/icon/down.png')" />
                    </div>
                </div>
                <div class="content">
                    <div class="list">
                        <div
                            class="item row"
                            :type="comment.option.type"
                            v-for="(comment, index) in comments"
                            :key="index"
                        >
                            <div
                                class="picture icon"
                                @click="toUserPage(comment.userInfo.uid)"
                            >
                                <img :src="comment.userInfo.avatarImg" />
                            </div>

                            <div class="content">
                                <div class="username">
                                    {{ comment.userInfo.nickNake }}
                                </div>
                                <div class="text">{{ comment.content }}</div>
                                <div class="bottom">
                                    {{ getRecentTimeString(comment.timeStamp) }}
                                </div>
                            </div>

                            <!-- 点赞按钮 -->
                            <BtnLike
                                class="like"
                                :likes="comment.likes"
                                @like-click="onLikeComment(comment)"
                            />
                        </div>
                    </div>
                </div>

                <div class="comment-input row">
                    <div class="field">
                        <input
                            v-model="commentContent"
                            type="text"
                            placeholder="发表你的评论~"
                        />
                    </div>

                    <div class="btn-confirm" @click="postComment">评论</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
 
<script>
import BtnLike from "./btnLike";
import { getRecentTimeString } from "@/utils/date";
export default {
    components: { BtnLike },
    props: {
        value: Boolean,
        commentId: String
    },
    data() {
        return {
            show: this.value,
            // show: true,

            comments: [],

            commentContent: "",

            getRecentTimeString: getRecentTimeString
        };
    },
    computed: {
        userId() {
            return this.$store.state.userInfo.uid;
        }
    },
    watch: {
        value(v) {
            if (v === true) {
                this.getCommentDetail();
            }
            this.show = v;
        }
    },

    methods: {
        getCommentDetail() {
            console.log("comment", this.commentId);
            this.$cloudApi.getTargetComment(this.commentId).then(res => {
                console.log(res);

                // 评论排序
                this.comments = res.list.sort((a, b) => {
                    if (b.likes.length === a.likes.length) {
                        return b.timeStamp - a.timeStamp;
                    }
                    return b.likes.length - a.likes.length;
                });
            });
        },

        onClose() {
            this.$emit("input", false);
        },

        postComment() {
            const commentId = this.commentId;
            const req = {
                commentId,
                content: this.commentContent,
                option: {
                    type: "toPost" // toUser
                }
            };

            this.$cloudApi
                .postComment(req)
                .then(res => {
                    console.log(res);
                    this.$showToast("发表评论成功");
                    this.getCommentDetail();
                })
                .catch(err => {
                    console.log(err);

                    this.$showToast("系统异常");
                });

            console.log("postComment", req);
        },

        onLikeComment(comment) {
            console.log(
                "onLikeComment",
                comment.cid,
                comment.likes,
                this.userId
            );

            this.$cloudApi
                .likeComment(this.commentId, comment.cid)
                .then(res => {
                    console.log("like");
                    this.comments = this.comments.map(c => {
                        if (c.cid === comment.cid) {
                            c.likes.push({
                                uid: wf.getModule("store").state.userInfo.uid
                            });
                        }
                        return c;
                    });
                });
        },

        toUserPage(uid) {
            console.log("查看用户详情", `/userDetail?uid=${uid}`);
        }
    }
};
</script>


<style lang="less" scoped>
.comment-popup {
    .body {
        width: 100%;
        min-height: 80vh;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background: #fff;
        font-size: 24px;

        .header {
            position: relative;
            padding: 30px 30px;
            align-items: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            .icon {
                position: absolute;
                width: 50px;
                z-index: 3000;
            }
            .title {
                width: 100%;
                text-align: center;
            }
        }

        .content {
            .list {
                .item {
                    padding: 30px 30px;
                    align-items: center;

                    .picture {
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-right: 30px;
                    }

                    .content {
                        flex: 1 1 auto;

                        .username {
                            color: #888;
                        }

                        .text {
                            color: #000;
                            padding: 8px 0 8px 0;
                        }

                        .bottom {
                            color: #999;
                        }
                    }

                    .like {
                        width: 50px;
                    }
                }
            }
        }

        .comment-input {
            position: fixed;
            width: 100%;
            box-sizing: border-box;
            padding: 30px 30px;
            bottom: 0;
            align-items: center;

            .field {
                flex: 1 1 auto;
                margin-right: 30px;
                background: #eee;
                border-radius: 30px;

                input {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 20px 30px 20px 40px;
                    font-size: 30px;
                }
            }

            .btn-confirm {
                color: #07c160;
                font-size: 32px;
            }
        }
    }
}
.van-popup {
    background: transparent;
}
</style>